<template>
    <div class="container bg-white">
        <div class="password-div clearfix">
            <div class="password-box fr mgt-30">
                <p class="password-title">找回密码</p>
                <el-form :model="Login" ref="loginForm" label-width="0" class="loginForm">
                    <el-form-item prop="phone" class="phone-input">
                        <el-input v-model="Login.phone" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item prop="验证码" class="code clearfix">
                        <el-input v-model="Login.sendcode" placeholder="请输入验证码" class="code-input fl"></el-input>
                        <el-button type="button" @click="sendcode" :disabled="disabled" v-if="disabled==false">发送验证码</el-button>
                        <el-button type="button" @click="sendcode" :disabled="disabled" v-if="disabled==true">{{btntxt}}
                        </el-button>
                    </el-form-item>
                    <el-form-item prop="phone">
                        <el-input v-model="Login.phone" placeholder="请输入新密码"></el-input>
                    </el-form-item>
                    <el-form-item prop="phone" class="phone-input">
                        <el-input v-model="Login.phone" placeholder="再输入一次"></el-input>
                    </el-form-item>
                    <el-form-item class="password-login-btn">
                        <el-button type="primary" @click="submitForm">确定</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name:'Password',
  data(){
      return{
          Login: {
            phone: '',
            sendcode: '',
        },
        disabled: false,
        time: 0,
        btntxt: "重新发送",
      }
  },
  methods:{
      //手机验证发送验证码
            sendcode() {
                const reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
                if (this.Login.phone == '') {
                    this.$message({
                        message:'手机号不能为空',
                        center: true
                    })
                    return
                }
                if (!reg.test(this.Login.phone)) {
                    this.$message({
                        message:'请输入正确的手机号',
                        center:true
                    })
                    return
                } else {
                    console.log(this.Login.phone);
                    this.$message({
                        message: '发送成功',
                        type: 'success',
                        center:true
                    });
                    this.time = 60;
                    this.disabled = true;
                    this.timer();
                }
            },
            //60S倒计时
            timer() {
                if (this.time > 0) {
                    this.time--;
                    this.btntxt = this.time + "s后重新获取";
                    setTimeout(this.timer, 1000);
                } else {
                    this.time = 0;
                    this.btntxt = "获取验证码";
                    this.disabled = false;
                }
            },
            submitForm(){

            }
  },
  created(){
    this.$emit('public_header', false);
    this.$emit('public_headerhover', true);
    this.$emit('public_footer', true);
  }
}
</script>

<style>
 @import '../../../static/style/password';
</style>
